<template>
  <div>
    <Row type="flex">
      <el-row style="margin: 0 0 10px 10px;">
        <el-button size="small" type="primary">活动新增</el-button>
      </el-row>
    </Row>
    <Row type="flex">
      <Col span="6" order="1" v-for="(item, index) in activity" :key="index" style="padding: 10px;cursor: pointer;">
        <Card>
          <p slot="title">
            <Icon type="waterdrop"></Icon>
            {{item.activityName}}
          </p>
          <a href="#" slot="extra" @click.prevent="showActivityInfo(item)">
            <Icon type="ios-loop-strong"></Icon>
            {{item.activityStatus}}
          </a>
          <Row type="flex" justify="center" align="middle" class="">
            <div class="count-to-con">
              <img  :src="item.activityImg" width="100%" alt="">
            </div>
          </Row>
          <p>活动口号：<span>{{item.clubFlg}}</span></p>
          <p>比赛时间：<span>{{item.activityDate}}</span></p>
          <p>参与人数：<span>{{item.activityNum}}</span></p>
          <p>举办地点：<span>{{item.activityAddress}}</span></p>
        </Card>
      </Col>
    </Row>
    <Modal v-model="modalVisible" :title="content.activityName" @on-ok="ok" @on-cancel="cancel">
      <img :src="content.activityImg" width="100%" alt="">
      <p style="margin-bottom: 8px;">活动介绍：{{ content.clubDetail }}</p>
      <p style="margin-bottom: 8px;">比赛时间：{{ content.activityDate }}</p>
      <p style="margin-bottom: 8px;">举办地点：{{ content.activityAddress }}</p>
      <p style="margin-bottom: 8px;">参与人数：{{ content.activityNum }}</p>
      <div>
        <span>活动状态：</span>
        <RadioGroup v-model="content.activityStatus">
          <Radio label="计划中" value="计划中"></Radio>
          <Radio label="已预约" value="已预约"></Radio>
          <Radio label="已结束" value="已结束"></Radio>
          <Radio label="已取消" value="已取消"></Radio>
        </RadioGroup>
      </div>
    </Modal>
  </div>
</template>

<script>

export default {
  name: 'activity_page',
  components: {

  },
  data () {
    return {
      modalVisible: false,
      contentObj: {},
      activity:[
        {
          'id': 1,
          'activityName': '武汉奥林匹克羽毛球决赛',
          'activityImg': require('@/imgs/club-address-1.png'),
          'clubDetail': '武汉新入职的小伙伴有喜欢篮球的欢迎加入篮球俱乐部， 目前花山和招银大厦这边一般一到两周都会组织篮球活动，欢迎大家踊跃加入，一起切磋切磋，玩耍玩耍。 有兴趣的企业微信上可以联系“陈然”或者“陈昕”又或者武汉篮球俱乐部其他成员邀请加入。。。',
          'clubFlg': '力争第一，团结友爱',
          'activityNum': '200',
          'activityDate': '2021-3-29 18:00-22:00',
          'activityAddress': '武汉·奥林匹克',
          'activityStatus': '已预约',
        },
        {
          'id': 2,
          'activityName': '北京水立方游泳活动',
          'activityImg': require('@/imgs/club-address-2.png'),
          'clubDetail': '武汉新入职的小伙伴有喜欢篮球的欢迎加入篮球俱乐部， 目前花山和招银大厦这边一般一到两周都会组织篮球活动，欢迎大家踊跃加入，一起切磋切磋，玩耍玩耍。 有兴趣的企业微信上可以联系“陈然”或者“陈昕”又或者武汉篮球俱乐部其他成员邀请加入。。。',
          'clubFlg': '劈水斩浪，泳出精彩',
          'activityNum': '1000',
          'activityDate': '2021-8-15 18:00-22:00',
          'activityAddress': '北京·水立方',
          'activityStatus': '计划中',
        },
        {
          'id': 3,
          'activityName': 'CBD森特妙羽篮球活动',
          'activityImg': require('@/imgs/club-address-3.png'),
          'clubDetail': '武汉新入职的小伙伴有喜欢篮球的欢迎加入篮球俱乐部， 目前花山和招银大厦这边一般一到两周都会组织篮球活动，欢迎大家踊跃加入，一起切磋切磋，玩耍玩耍。 有兴趣的企业微信上可以联系“陈然”或者“陈昕”又或者武汉篮球俱乐部其他成员邀请加入。。。',
          'clubFlg': '团结拼搏，超越自我',
          'activityNum': '100',
          'activityDate': '2021-1-15 18:00-22:00',
          'activityAddress': '武汉·森特妙羽',
          'activityStatus': '已结束',
        }
      ],
      activityName: ['武汉奥林匹克羽毛球决赛', '武汉奥林匹克羽毛球决赛', '武汉奥林匹克羽毛球决赛', '武汉奥林匹克羽毛球决赛', '武汉奥林匹克羽毛球决赛'],
      club_detail: '武汉新入职的小伙伴有喜欢篮球的欢迎加入篮球俱乐部， 目前花山和招银大厦这边一般一到两周都会组织篮球活动，欢迎大家踊跃加入，一起切磋切磋，玩耍玩耍。 有兴趣的企业微信上可以联系“陈然”或者“陈昕”又或者武汉篮球俱乐部其他成员邀请加入。。。',
      end: 0,
      unit: [[3, '千多'], [4, '万多'], [5, '十万多']],
      unit2: [[1, '十多'], [2, '百多'], [3, '千多'], [4, '万多'], [5, '十万多'], [6, '百万多'], [7, '千万多'], [8, '亿多']],
      asynEndVal: 487,
      integratedEndVal: 3
    }
  },
  computed: {
    content () {
      return this.contentObj;
    }
  },
  methods: {
    showActivityInfo: function(e) {
      this.modalVisible = true;
      this.contentObj.id = e.id;
      this.contentObj.activityName = e.activityName;
      this.contentObj.activityImg = e.activityImg;
      this.contentObj.clubDetail = e.clubDetail;
      this.contentObj.activityAddress = e.activityAddress;
      this.contentObj.activityNum = e.activityNum;
      this.contentObj.activityDate = e.activityDate;
      this.contentObj.activityStatus = e.activityStatus;
    },
    ok() {
      this.activity.forEach(item => {
        if (item.id === this.contentObj.id) {
          item.activityStatus = this.contentObj.activityStatus;
        }
      })
    },
    cancel() {

    }
  }
}
</script>

<style scoped>

</style>
